<template>
  <FormView not-form form-width="100%">
    <div class="pageable-table-demo">
      <PageableTable :api="fetchMessage" class="table-demo" row-class-name="pointer" @row-click="showAlert">
        <TableColumn label="提醒内容" prop="message" />
        <TableColumn label="提醒时间" prop="createTime" width="240" />
        <TableColumn :formatter="formatReadFlag" label="状态" prop="readFlag" width="100" />
      </PageableTable>
      <PageableTable class="table-demo" row-class-name="pointer" url="group/page" @row-click="showAlert">
        <!--<TableColumn type="selection" width="55"/>-->
        <TableColumn fixed="left" label="状态" width="100">
          <template #default="{ row }">
            <ElTooltip :content="`状态: ${0 === row.status ? '启用' : '禁用'}`" placement="top">
              <ElSwitch v-model="row.status" :active-value="0" :inactive-value="1" disabled />
            </ElTooltip>
          </template>
        </TableColumn>
        <TableColumn label="岗位编码" prop="groupCode" sortable width="150" />
        <TableColumn label="岗位名称" prop="groupName" sortable width="250" />
        <TableColumn label="岗位说明" prop="comments" />
        <TableColumn fixed="right" label="操作" width="240">
          <template #default>
            <ElButton size="mini">分配角色</ElButton>
            <ElButton size="mini" type="primary">编辑</ElButton>
            <ElButton size="mini">删除</ElButton>
          </template>
        </TableColumn>
      </PageableTable>
      <PageableTable :api="fetchData" class="table-demo" row-class-name="pointer" @row-click="showAlert">
        <!--<TableColumn type="selection" width="55"/>-->
        <TableColumn label="责任主体" prop="name" width="180" />
        <TableColumn label="责任单位/部门" prop="groupOuNames" />
      </PageableTable>
      <PageableTable class="table-demo" row-class-name="pointer" url="user/page" @row-click="showAlert">
        <!--<TableColumn type="selection" width="55"/>-->
        <TableColumn label="状态" width="100">
          <template #default="{ row }">
            <ElTooltip :content="`状态: ${'0' === `${row.status}` ? '启用' : '禁用'}`" placement="top">
              <ElSwitch v-model="row.status" :active-value="0" :inactive-value="1" disabled />
            </ElTooltip>
          </template>
        </TableColumn>
        <TableColumn label="登录名称" prop="username" sortable="custom" width="150" />
        <TableColumn label="用户名称" prop="name" sortable="custom" width="150" />
        <TableColumn label="邮箱" prop="email" width="200" />
        <TableColumn label="手机号码" prop="mobilePhone" width="150" />
      </PageableTable>
      <PageableTable
        class="table-demo"
        http-get
        style="width: 95%; height: 500px"
        :columns="[{ label: '测试', prop: 'name' }]"
        url="message/page" />
    </div>
  </FormView>
</template>

<script>
  export default {
    name: 'PageableTableDemo',
    methods: {
      fetchData() {},
      fetchMessage() {},
      showAlert(row) {
        alert(JSON.stringify(row))
      },
      formatReadFlag(row, column) {
        const readFlag = row[column.property]
        const readFlagList = ['未读', '已读']
        return readFlagList[readFlag]
      }
    }
  }
</script>

<style lang="scss">
  .pageable-table-demo {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;

    .table-demo {
      width: 48%;
      height: 240px;
      margin: 10px auto;
    }
  }
</style>
